@pro-global-header: ~'pro-global-header';

.@{pro-global-header} {
  position: relative;
  padding: 0;
  z-index: 3;

  &&-fixed {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 19;
    transition: width .2s ease;
  }

  &-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 @padding-md;
    background-color: @white;
    box-shadow: 0 1px 4px fade(@layout-header-background, 8%);
  }

  &-nav {
    display: flex;
    flex: 1 1 0%;
    height: 100%;

    &-right {
      flex: 0 0 auto;
    }

    &-item {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 @padding-sm;
      cursor: pointer;
      transition: all .3s;

      &:hover {
        background-color: @header-item-hover-color;
      }
    }
  }

  &-index-dropdown-menu {
    &.ant-dropdown-menu {
      border-radius: 4px;
      background-color: @white;
      box-shadow: 0 6px 16px -8px fade(@black, 8), 0 9px 28px 0 fade(@black, 5), 0 12px 48px 16px fade(@black, 3);
    }
    .ant-dropdown-menu-item {
      min-width: 110px;
      text-align: center;
    }
  }

  &&-horizontal {
    &.@{pro-global-header}-fixed {
      width: 100%;
    }

    .@{pro-global-header}-wrapper {
      background-color: @primary-color;
    }

    .@{pro-global-header}-nav-item {
      color: fade(@white, 85%);
    }

    .ant-spin-dot-item {
      background-color: @white;
    }
  }
}
